<!DOCTYPE html>
<html lang="en">

  <head>
    <base href="./../">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CoreUI Free Bootstrap Admin Template</title>
    <!-- Icons-->
    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
  </head>



<body>

    <div class="card"> 
 <div class="card-header">
  Progress 
  <div class="card-header-actions"> 
   <a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-popover/popovers.html" target="_blank"> <small class="text-muted">docs</small> </a> 
  </div> 
 </div> 
 <div class="card-body"> 
  <div class="progress mb-3"> 
   <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header">
  Progress 
  <small>labels</small> 
 </div> 
 <div class="card-body"> 
  <div class="progress mb-3"> 
   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    25%
   </div> 
  </div> 
  <div class="progress"> 
   <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    75%
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header">
  Progress 
  <small>height</small> 
 </div> 
 <div class="card-body"> 
  <div class="progress mb-3" style="height: 3px;"> 
   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress" style="height: 30px;"> 
   <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header">
  Progress 
  <small>backgrounds</small> 
 </div> 
 <div class="card-body"> 
  <div class="progress mb-3"> 
   <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress"> 
   <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header">
  Progress 
  <small>multiple bars</small> 
 </div> 
 <div class="card-body"> 
  <div class="progress"> 
   <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> 
   <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> 
   <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header">
  Progress 
  <small>striped</small> 
 </div> 
 <div class="card-body"> 
  <div class="progress mb-3"> 
   <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
  <div class="progress mb-3"> 
   <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header">
  Progress 
  <small>animated</small> 
 </div> 
 <div class="card-body"> 
  <div class="progress"> 
   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> 
  </div> 
 </div> 
</div>
	
	

    <script src="../js/iframeResizer/iframeResizer.contentWindow.js"></script>
	<script src="vendors/jquery/js/jquery.min.js"></script>
<script src="vendors/popper.js/js/popper.min.js"></script>
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="vendors/@coreui/coreui/js/coreui.min.js"></script>

</body>

</html>